<%--
  Created by IntelliJ IDEA.
  User: SuZePing
  Date: 2021/1/24
  Time: 13:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<%@include file="/WEB-INF/include/include-head.jsp"%>
	<link rel="stylesheet" href="static/css/pagination.css">
	<script src="static/jquery/jquery.pagination.js"></script>
	<script type="text/javascript" src="static/js/DrugRoleJS.js"></script>
	<script type="text/javascript">
		$(function () {
			// 分页数据初始化
			window.pageNum = 1;
			window.pageSize = 5;
			window.keyword = "";
			// 调用分页函数
			generateRolePage();

			// 关键字查询
			$("#selByKeyword").click(function () {
				window.keyword = $("#keywordInput").val();
				// 页码初始化为第一页
				window.pageNum = 1;
				generateRolePage();
			});

			// 显示新增角色模态框
			$("#addRole").click(function () {
				$("#roleAddModal").modal("show");
			});

			// 执行新增
			$("#addRoleSubmit").click(function () {
				var roleName = $.trim($("#addRoleName").val());
				$.ajax({
					"url": "role/save.json",
					"type": "post",
					"data": {
						"roleName":roleName
					},
					"dataType": "json",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg("请求错误！说明：[" + response.msg + "]");
						}else {
							layer.msg("新增角色成功！");
							// 显示到最后一页并重新加载分页数据
							var total = response.data;
							var page = Math.floor(total / window.pageSize);
							if (total % window.pageSize != 0){
								page = page + 1;
							}
							window.pageNum = page;
							generateRolePage();
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
				// 关闭模态框
				$("#roleAddModal").modal("hide");
				// 清理模态框
				$("#addRoleName").val("");
			});

			// 显示修改角色模态框[由于修改按钮是动态生成的，所以使用on()]
			$("#rolePageTBody").on("click",".editRoleBtn",function () {
				$("#editRoleModal").modal("show");
				// 回显roleName及id
				$("#editRoleName").val($(this).attr("roleName"));
				$("#editRoleId").val($(this).attr("roleId"));
			});

			// 执行修改
			$("#editRoleSubmit").click(function () {
				$.ajax({
					"url": "role/edit.json",
					"type": "post",
					"data": {
						"roleId":$("#editRoleId").val(),
						"roleName":$("#editRoleName").val()
					},
					"dataType":"json",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg("请求错误！说明：[" + response.msg + "]");
						}else {
							layer.msg("修改角色成功！");
							generateRolePage();
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
				// 关闭模态框
				$("#editRoleModal").modal("hide");
			});

			// 实现全选按钮功能
			$("#checkboxAll").click(function () {
				$(".delRoleCheckbox").prop("checked",$(this).prop("checked"));
			});

			$("#rolePageTBody").on("click",".delRoleCheckbox",function () {
				// 判断选中的按钮数量是否等于全部按钮数量
				$(".delRoleCheckbox").length != $(".delRoleCheckbox:checked").length ?
					$("#checkboxAll").prop("checked",false)
					:
					$("#checkboxAll").prop("checked",true);
			});

			// 单条删除时 显示确认删除模态框
			$("#rolePageTBody").on("click",".removeRoleBtn",function () {
				var roleId = $(this).attr("roleId");
				var roleName = $(this).attr("roleName");
				var roleArray = [{
					roleId :roleId,
					roleName :roleName
				}];
				showRemoveConfirm(roleArray);
			});

			// 执行删除
			$("#removeRoleSubmit").click(function () {
				var roleIdArrayJSON = JSON.stringify(window.roleIdArray);
				$.ajax({
					"url": "role/del.json",
					"type": "post",
					"data":roleIdArrayJSON,
					// 请求体为json
					"contentType":"application/json;charset=UTF-8",
					"dataType":"json",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg("请求错误！说明：[" + response.msg + "]");
						}else {
							layer.msg("删除角色成功！");
							// 取消全选按钮的选中状态
							$("#checkboxAll").prop("checked",false);
							generateRolePage();
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
				// 关闭模态框
				$("#removeRoleModal").modal("hide");
			});

        });
	</script>
</head>
<body>
<%@ include file="/WEB-INF/include/include-nav.jsp"%>
<div class="container-fluid">
	<div class="row">
		<%@include file="/WEB-INF/include/include-sidebar.jsp"%>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 id="title" class="panel-title"><i class="glyphicon glyphicon-th"></i> 角色列表</h3>
				</div>
				<div class="panel-body">
					<form class="form-inline" role="form" style="float:left;">
						<div class="form-group has-feedback">
							<div class="input-group">
								<div class="input-group-addon">查询条件</div>
								<input id="keywordInput" class="form-control has-success" type="text" placeholder="请输入查询条件">
							</div>
						</div>
						<button id="selByKeyword" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
					</form>
					<button type="button" id="removeRole" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
					<button type="button" id="addRole" class="btn btn-primary" style="float:right;"><i class="glyphicon glyphicon-plus"></i> 新增</button>
					<br>
					<hr style="clear:both;">
					<div class="table-responsive">
						<table class="table  table-bordered">
							<thead>
							<tr>
								<th width="30">#</th>
								<th width="30" id="checkboxAllTH"><input id="checkboxAll" type="checkbox"></th>
								<th>名称</th>
								<th width="100">操作</th>
							</tr>
							</thead>
							<tbody id="rolePageTBody">
							<%-- 手动渲染数据 --%>
							</tbody>
							<tfoot>
							<tr>
								<td colspan="6" align="center">
									<div id="Pagination" class="pagination"><%-- 显示Pagination分页 --%></div>
								</td>
							</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<%-- 引入角色增删改模态框 --%>
<%@include file="/WEB-INF/modal/modal-role-add.jsp"%>
<%@include file="/WEB-INF/modal/modal-role-edit.jsp"%>
<%@include file="/WEB-INF/modal/modal-role-remove.jsp"%>
</body>
</html>




